<template>
  <div id="main">
    <el-card class="add-box-card">
      <div slot="header" class="box-card-title">
        <span>添加巡检任务</span>
      </div>

      <el-form class="edit-form" label-width="120px" label-position="left"  :model="editFormData" :rules="rules" ref="ruleForm">
        <el-form-item label="巡检时间：" prop="date" >
          <el-date-picker style="width:260px;"  
          v-model="editFormData.date" 
          type="date" 
          placeholder="选择日期"
          :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="巡检人：" prop="person" >
          <el-select clearable style="width:260px;"  v-model="editFormData.person" placeholder="请选择巡检人">
            <el-option   v-for="item in personList" :key="item.value" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <div :key="route.index" v-for="(route,index) in editFormData.routes">
          <el-form-item :label="`${route.index}号巡检路线：`" prop="routes" >
          <el-select style="width:260px;"  v-model="editFormData.routes[index].route" clearable placeholder="请选择巡检路线">
            <el-option
              v-for="item in routeList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
          <div v-if="index === 0" class="add-green-text">
            <img src="../../../../static/add.jpg" @click="addPatrolRoute" alt />
            <img src="../../../../static/cutdown.jpg" @click="reducePatrolRoute" alt />
            <span>添加删除巡更路线</span>
          </div>
        </el-form-item>
        </div>
        <el-form-item label="备注要求：">
          <el-input type="textarea" style="width:260px;" :rows="6" placeholder="请输入内容" v-model="editFormData.tips"></el-input>
        </el-form-item>
        <!--<el-form-item class="message-button">
          <el-button class="yellowButton">短信提醒</el-button>
        </el-form-item>-->
      </el-form>
    </el-card>

    <div class="footer">
      <el-button @click="goSubmit('ruleForm')" class="greenButton" type="primary">提交</el-button>
    </div>
  </div>
</template>

<script>
import DayJs from 'dayjs'
export default {
  data: function() {
    return {
      pickerOptions:{
            disabledDate(time) {
            return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
          }
        },
      //编辑form数据 每次关闭弹窗或提交后应还原初始状态
      editFormData: {
        date: DayJs(new Date()).format('YYYY-MM-DD'),
        person: "",
        routes: [
          {
            index:1,
            route:''
          }
        ],
        tips: ""
      },
      rules:{
        date:[
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          person:[
            { required: true, message: '请选择巡检人',trigger: 'change' }
          ],
          routes:[
            { required: true, message: '请选择巡检路线',trigger: 'change' }
          ]
      },
      personList: [],
      routeList: []
    };
  },
  created(){

    this.ajaxCommon.ajax({
      url: 'numberList',
      success: (res) => {
        var list = [];
        console.log(res);
        Object.keys(res).forEach((index)=>{
          var item = res[index];
          list.push({
            name: item.u_name,
            value: item.u_id,
          })
        });
        this.personList = list;
      }
    });
    this.ajaxCommon.ajax({
      url: 'traceList',
      data: {
        sort: 'DESC'
      },
      success: (res) => {
        if (res.code == 200) {
          var list = [];
          res.data.forEach(item=>{
            list.push({
              value: item.route_id,
              name: item.route_name
            })
          });
          this.routeList = list;
        }
        console.log(res)
      }
    })
  },
  methods:{
    initFormData(formName){
      this.$refs[formName].resetFields();
      this.editFormData = {
        date: "",
        person: "",
        routes: [
          {
            index:1,
            route:''
          }
        ],
        tips: ""
      }
    },
    goSubmit(){
      var Notice = this.ajaxCommon.notice;
      console.log(this.editFormData);
      var data = this.editFormData;
      var routs = [];
      data.routes.forEach(item=>{
        if(item.route){
          routs.push(item.route);
        }
      });
      if(!data.date){
        Notice('请选择巡检时间', 3);
        return
      }
      if(!data.person){
        Notice('请选择巡检人', 3);
        return
      }
      if(routs.length==0){
        Notice('请选择巡检路线', 3);
        return
      }
      var param = {
        ta_time: DayJs(data.date).format('YYYY-MM-DD'),
        ta_route_id: routs,
        ta_u_id: data.person,
        ta_des: data.tips
      };
      console.log(param)
      this.ajaxCommon.ajax({
        url: 'taskAdd',
        data: param,
        method: 'post',
        success: res=>{
          if(res.code==200){
            Notice('添加成功');
            this.initFormData('ruleForm');
          } else {
            Notice(res.status, 2);
          }
        }
      })
    },
    addPatrolRoute() {
      this.editFormData.routes.push({
        index: this.editFormData.routes.length + 1,
        route:''
      })
    },
    reducePatrolRoute() {
      if(this.editFormData.routes.length > 1) this.editFormData.routes.pop()
      console.log(this.editFormData.routes.length)
    }
  }
};
</script>

<style lang="less" scoped>
#main {
  width: 100%;
  .add-box-card {
    border: 1px solid #00bdac;
    box-shadow: 0px 4px 16px 0px rgba(0, 201, 212, 0.14);
    height: 480px;
    .box-card-title {
      background-color: #00bdac;
      height: 36px;
      line-height: 36px;
      padding-left: 30px;
      font-size: 14px;
      color: #ffffff;
    }
  }

  .footer {
    width: 100%;
    text-align: right;
    margin-top: 20px;
  }

  .add-green-text {
    display: inline-flex;
    color: #00bdac;
    width: 170px;
    justify-content: space-between;
    align-items: center;
    vertical-align: bottom;
    margin-left: 14px;

    img {
      cursor: pointer;
      width: 22px;
      height: 22px;
    }
  }
}
</style>

<style lang="less">
.add-box-card {
  .el-card__header {
    padding: 0;
  }
}
</style>
